<template>
  <v-layout title="开票单预览">
    <el-card>
      <el-card>
        <div slot="header">订单列表</div>
        <v-table
          :default-operate="false"
          :select="false"
          :table-data="tableData"
          :table-title="tableTitle"
          :show-pagination="false"
          btn-class="btn"
        />
      </el-card>
      <el-row class="clearfix pdt50 confirm" type="flex" justify="center">
        <el-col :lg="12" :md="12" :sm="20" :xs="24">
          <v-form
            :form-title="confirmTitle"
            :form-data="confirmData"
            label-width="120px"
          >
            <template v-for="item in 5" slot-scope="props" :slot="'upload'+item">
              <uploadPdf
                :props="props"
                :formData="confirmData"
                :show-upload="false"
                :show-del="false"
              />
            </template>
          </v-form>

        </el-col>
      </el-row>
    </el-card>
    <div v-if="messages.length">
      <div class="view">
        开票进度查看：
      </div>

      <v-messageBox
        :messages="messages"
      />
    </div>
    <el-row v-if="assistantRole||financeRole" type="flex" justify="end" class="pdv15 pdr120">
      <el-button type="primary" size="small" @click="modify"> 修改</el-button>
      <el-button type="primary" size="small" v-if="confirmData.cur_status===4"  @click="check(3)" >不通过,退回</el-button>
      <el-button v-if="confirmData.cur_status<5" type="primary" size="small" @click="check(5)">通过,开始出票</el-button>
      <!--<el-button v-if="confirmData.cur_status===5" type="primary" size="small" @click="check(6)">填写发票号码</el-button>-->
      <el-button v-if="confirmData.cur_status===5||confirmData.cur_status===6" type="primary" size="small" @click="check(7)">
        商务已领取、开票完成
      </el-button>
    </el-row>

    <!--填写开票时间,日期-->
    <el-dialog
      :visible.sync="invoiceNumVisible"
      title="请填写发票号"
      width="30%"
    >
      <el-form label-width="100px" size="small">
        <el-form-item label="合同编号">
          <el-input v-model="addition.contract_num"/>
        </el-form-item>
        <el-form-item label="发票编号">
          <el-input v-model="addition.invoice_code"/>
        </el-form-item>
        <el-form-item label="开票日期">
          <el-date-picker
            v-model="addition.invoice_date"
            value-format="yyyy-MM-dd"/>
        </el-form-item>
        <!--<el-form-item label="发票电子档">-->
          <!--<el-upload-->
            <!--:action="previewUrl"-->
            <!--:with-credentials="true"-->
            <!--:on-success="handleSuccess"-->
            <!--:on-error="onError"-->
            <!--:on-remove="onRemove"-->
            <!--multiple-->
            <!--:file-list="fileList"-->
          <!--&gt;-->
            <!--<el-button size="small" type="primary">点击上传</el-button>-->
          <!--</el-upload>-->
        <!--</el-form-item>-->
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="primary" size="small" @click="invoiceSubmit">确定</el-button>
      </el-row>
    </el-dialog>

  </v-layout>
</template>

<script>
import auth from '@/mixins/auth'
import uploadPdf from '@/views/components/uploadPdf'
export default {
  mixins: [auth],
  components: {
    uploadPdf
  },
  data() {
    return {
      fileList:[],
      previewUrl: process.env.BASE_API+'file/up',
      isImg: false,
      id: '',
      tableData: [],
      tableTitle: [
        {
          cn: '订单id',
          en: 'ad_id'
        },
        {
          cn: '公众号',
          en: 'name'
        },
        {
          cn: '版位',
          en: 'ad_place_name'
        },
        {
          cn: '广告主',
          en: 'ad_name'
        },
        {
          cn: '发布时间',
          en: 'publish_at'
        },
        {
          cn: '商务负责人',
          en: 'swname'
        },
        {
          cn: '订单金额',
          en: 'ad_price'
        },
      ],
      addition:{},

      confirmTitle: [
        {
          cn: '微赞公司: ',
          en: 'company_type',
          type:'select',
          list:[
            {
                label:'霍尔果斯微赞网络科技有限公司',
                value:1
            },
            {
                label:'霍尔果斯微赞网络科技有限公司杭州第一分公司',
                value:0
            },
          ],
          disabled: true
        },
        {
          cn: '广告主: ',
          en: 'ad_name',
          disabled: true
        },
        {
          cn: '开票公司: ',
          en: 'company_name',
          disabled: true
        },
        {
          cn: '纳税人识别号: ',
          en: '纳税人识别号',
          disabled: true
        },
        {
          cn: '地址: ',
          en: 'address',
          disabled: true
        },
        {
          cn: '电话: ',
          en: 'tel',
          disabled: true
        },
        {
          cn: '开户行: ',
          en: '开户行',
          disabled: true
        },
        {
          cn: '账号: ',
          en: '帐号',
          disabled: true
        },
        {
          cn: '金额(含税): ',
          en: 'money',
          disabled: true
        },
        {
          cn: '发票类别: ',
          en: 'invoice_type',
          type: 'select',
          list: [
            {
              label: '专票',
              value: '1'
            },
            {
              label: '普票',
              value: '2'
            }
          ],
          disabled: true
        },
        {
          cn: '开票内容: ',
          en: 'invoice_content',
          type: 'select',
          list: [
            {
              label: '广告费',
              value: '1'
            },
            {
              label: '广告发布费',
              value: '2'
            },
            {
              label: '信息服务费',
              value: '3'
            },
            {
              label: '信息技术服务费',
              value: '4'
            },
            {
              label: '服务费',
              value: '5'
            }
          ],
          disabled: true
        },
        {
          cn: '营业执照: ',
          en: '营业执照',
          disabled: true,
          info: '营**照.pdf',
          type: 'upload1'
        },
        {
          cn: '开户许可 ',
          en: 'opening_permit',
          info: '开**可.pdf',
          type: 'upload2',
        },
        {
          cn: '纳税人证明 ',
          en: '一般纳税人证明',
          info: '纳税**明.pdf',
          type: 'upload3',
        },
        {
          cn: '开票资料 ',
          en: 'invoice_infrom',
          info: '开**料.pdf',
          type: 'upload4',
        },
        {
          cn: '结算单: ',
          en: 'invoice_file',
          disabled: true,
          info: '结**单.pdf',
          type: 'upload5'
        },
        {
          cn: '备注: ',
          en: 'remark',
          disabled: true,
          type: 'textarea'
        },
        {
          cn: '合同编号: ',
          en: 'contract_num',
          disabled: true
        },
        {
          cn: '开票日期: ',
          en: 'invoice_date',
          disabled: true
        },
        {
          cn: '开票编号: ',
          en: 'invoice_code',
          disabled: true
        },
        // {
        //   cn: '发票电子档: ',
        //   en: 'invoice_electronic',
        //   type:'pic',
        //   disabled: true
        // }
      ],
      confirmData: {},

      dialogTableVisible: false,
      invoiceNumVisible: false,
      messages: []
    }
  },
  activated() {
    this.id = this.$route.query.id
    if (this.id) {
      this.getInvoiceDetail()
    }else{
      this.$router.go(-1)
    }
  },
  watch:{
    tableData(val){
      if (val.length) {
        this.confirmData.contract_num = this.tableData[0].contract_num
      }
    }
  },
  methods: {
    showFile(val) {
      this.previewUrl = val.data
      this.dialogTableVisible = true
    },
    // 获取详情
    getInvoiceDetail() {
      const data = { reqid: this.id }
      this.$get('action/InvoiceRequisition/qryOp', data)
        .then(res => {
          this.confirmData = {  ...res.data.InvoiceInformation[0], ...res.data.Invoice, }
          this.messages = res.data.Log
          this.tableData = res.data.adsList
          this.confirmData.ad_name = this.tableData[0]?this.tableData[0].ad_name:'';
          this.fileList = this.confirmData.invoice_electronic?JSON.parse(this.confirmData.invoice_electronic):[]
          this.confirmData.invoice_electronic = this.fileList
        })
    },

    invoiceSubmit() {
      const arrAdvsId = this.tableData.map(item => {
        return item.ad_id
      }).join(',')
      // const invoice_electronic = this.fileList.map(item=>{
      //   let obj = {};
      //   obj.name = item.name;
      //   obj.url = item.response?item.response.url:item.url;
      //   return obj
      // })
      const datas = {
        arrAdvsId,
        ...this.confirmData,
        id: this.id,
        cur_status:7,
        // invoice_electronic:JSON.stringify(invoice_electronic),
        invoice_code:this.addition.invoice_code,
        invoice_date:this.addition.invoice_date,
        contract_num:this.addition.contract_num,
      }
      this.$post('action/InvoiceRequisition/update', datas)
        .then(res => {
          this.invoiceNumVisible = false
          this.$message({
              message:res.msg,
              type:'success'
          })
          this.$router.go(-1)
        })
    },

    submit() {
        this.$post('action/InvoiceRequisition/update', this.data)
        .then(res => {
          new Promise((resolve, reject) => {
            this.$message({
              message: res.msg,
              type: 'success'
            })
            resolve()
          }).then(_ => this.$router.go(-1))
        })
    },
    handleSuccess(res, file, fileList){
      this.fileList = fileList
    },
    onError(err){
      console.log(err);
    },
    onRemove(file, fileList){
      this.fileList = fileList
    },

    check(val) {
      const arrAdvsId = this.tableData.map(item => {
        return item.ad_id
      }).join(',')

      this.data = {
        arrAdvsId,
        ...this.confirmData,
        cur_status: val,
        id: this.id,
      }
      if (val === 7) {
        return this.invoiceNumVisible = true
      }
      this.submit(this.data)
    },
    modify() {
      this.$router.push({
        name: 'invoice_manage.application',
        query: {
          id: this.id
        }
      })
    },

  }
}
</script>

<style scoped>
    span + button {
       margin-left: 10px;
     }
    .view {
        padding: 15px 0
    }

</style>
